<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_element": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_element": "active",
      "scrollspy": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">UI Elements</a></li>
              <li class="breadcrumb-item active" aria-current="page">Scrollspy</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="tx-36 mg-b-20 mg-lg-b-25">Scrollspy</h1>
        <p class="td-lead">Navigation or list group components based on scroll position to indicate which link is currently active in the viewport. Read the <a href="https://getbootstrap.com/docs/4.2/components/scrollspy/" target="_blank">Official Bootstrap Documentation</a> for a full list of instructions and other options.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">The base scrollspy component must position to relative and have a fix height.</p>

        <div data-label="Example" class="td-example">
          <nav id="navExample1" class="nav nav-pills mg-b-15">
            <a href="#home" class="nav-link">Home</a>
            <a href="#about" class="nav-link">About</a>
            <a href="#services" class="nav-link">Services</a>
          </nav>
          <div id="scroll1" data-spy="scroll" data-target="#navExample1" class="pos-relative bd ht-250 bg-gray-100">
            <div id="home" class="pd-20">
              <h6 class="mg-b-25">Home</h6>
              <p>Laoreet sed augue, ornare tellus quam, pellentesque tempor non cum, id facilisi dolor. Pede nullam, sed quam, lorem senectus rutrum voluptatem. Ullamcorper vehicula lacinia pede, curabitur eu arcu eleifend gravida vestibulum molestie, habitant turpis eget purus nascetur ullamcorper eget. Et est urna cursus quam nec libero. Est torquent, pede ut arcu ridiculus.</p>
              <p class="mg-b-0">Leo et erat quisque eu aenean ipsum, ridiculus lacus nulla. Mauris nulla, excepteur nam amet. Lacus ac libero mattis. Varius nam, eleifend magna. Purus netus etiam semper, fermentum cras, lorem ipsum eu, malesuada ante tincidunt orci quam vestibulum enim, quis vel pulvinar in. Dapibus maecenas, nullam id neque, nibh nam dolor bibendum nec, tincidunt sit ante mi libero eget sollicitudin. Dictum fringilla sed dui, lacus dolor vehicula fringilla ut integer cursus. Rutrum lorem aliquam nec, morbi volutpat. Condimentum sollicitudin elit tortor elementum eget, lorem sapien ante. Eget aperiam, arcu eget vestibulum, mauris a suspendisse metus, pharetra risus feugiat vestibulum praesent lacinia dignissim, justo nonummy.</p>
            </div>

            <hr>
            <div id="about" class="pd-20">
              <h6 class="mg-b-25">About</h6>
              <p>Turpis a nec nonummy vestibulum mauris sem, sit vitae, in neque suspendisse donec potenti velit erat. Massa aliquam mauris feugiat integer, eget quisque tincidunt lobortis sed euismod, non nam ornare. Ut tristique donec egestas mauris eu orci, eu tempor, donec omnis nonummy et turpis id, purus pulvinar lectus. Elit provident at, donec velit dui. Ante id at aliquam rutrum pharetra, tortor nulla lacus, commodo lectus.</p>
              <p>Laoreet sed augue, ornare tellus quam, pellentesque tempor non cum, id facilisi dolor. Pede nullam, sed quam, lorem senectus rutrum voluptatem. Ullamcorper vehicula lacinia pede, curabitur eu arcu eleifend gravida vestibulum molestie, habitant turpis eget purus nascetur ullamcorper eget. Et est urna cursus quam nec libero. Est torquent, pede ut arcu ridiculus.</p>
            </div>

            <hr>
            <div id="services" class="pd-20">
              <h6 class="mg-b-25">Services</h6>
              <p class="mg-b-0">Leo et erat quisque eu aenean ipsum, ridiculus lacus nulla. Mauris nulla, excepteur nam amet. Lacus ac libero mattis. Varius nam, eleifend magna. Purus netus etiam semper, fermentum cras, lorem ipsum eu, malesuada ante tincidunt orci quam vestibulum enim, quis vel pulvinar in. Dapibus maecenas, nullam id neque, nibh nam dolor bibendum nec, tincidunt sit ante mi libero eget sollicitudin. Dictum fringilla sed dui, lacus dolor vehicula fringilla ut integer cursus. Rutrum lorem aliquam nec, morbi volutpat. Condimentum sollicitudin elit tortor elementum eget, lorem sapien ante. Eget aperiam, arcu eget vestibulum, mauris a suspendisse metus, pharetra risus feugiat vestibulum praesent lacinia dignissim, justo nonummy.</p>
              <p>Turpis a nec nonummy vestibulum mauris sem, sit vitae, in neque suspendisse donec potenti velit erat. Massa aliquam mauris feugiat integer, eget quisque tincidunt lobortis sed euismod, non nam ornare. Ut tristique donec egestas mauris eu orci, eu tempor, donec omnis nonummy et turpis id, purus pulvinar lectus. Elit provident at, donec velit dui. Ante id at aliquam rutrum pharetra, tortor nulla lacus, commodo lectus.</p>
            </div>
          </div><!-- #scroll1 -->
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;nav id=&quot;navExample1&quot; class=&quot;nav nav-pills mg-b-15&quot;&gt;
  &lt;a href=&quot;#home&quot; class=&quot;nav-link&quot;&gt;Home&lt;/a&gt;
  &lt;a href=&quot;#about&quot; class=&quot;nav-link&quot;&gt;About&lt;/a&gt;
  &lt;a href=&quot;#services&quot; class=&quot;nav-link&quot;&gt;Services&lt;/a&gt;
&lt;/nav&gt;
&lt;div id=&quot;scroll1&quot; data-spy=&quot;scroll&quot; data-target=&quot;#navExample1&quot; class=&quot;pos-relative bd ht-250 bg-gray-100&quot;&gt;
  &lt;div id=&quot;home&quot; class=&quot;pd-20&quot;&gt;...&lt;/div&gt;
  &lt;div id=&quot;about&quot; class=&quot;pd-20&quot;&gt;...&lt;/div&gt;
  &lt;div id=&quot;services&quot; class=&quot;pd-20&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>
 
@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->


    @@include('./_script.html',{})

    <script>
      $(function(){
        'use strict'

        const scroll1 = new PerfectScrollbar('#scroll1', {
          suppressScrollX: true
        });


      });
    </script>
  </body>
</html>
